<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 */
        /* div {
            color: rebeccapurple;
        } */
        /* id选择器 */
        /* #div4 {
            color: red;
        } */
        /* .class选择器 */
        /* .font40 {
            font-size: 40px;
        } */
        /* 通配符选择器 */
        /* * {
            color: aqua;
        } */
        /* 复合选择器 */
        #div1,
        #div2 {
            color: aquamarine;
        }

        ul li {
            color: red;
        }

        ul .first {
            color: green;
        }

        ol a {
            color: burlywood;
        }

        #div1 {
            color: rgb(255, 255, 0);
            width: 500px;
            height: 200px;
            border-width: 1px 5px 10px 5px;
            border-color: black;
            border-style: solid;
        }
    </style>
</head>

<body>
    <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div</div>
    <div id="div3"><a href="#">我是一个div</a></div>

    <span id="div4" class="font40">我是一个div</span><br>
    无序列表
    <ul>
        <li class="first">第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>

    </ul>
    有序标签
    <ol>
        <li>第1个</li>
        <li><a href="#">第2个</a></li>
        <li>第3个</li>
        <li>第4个</li>

    </ol>
</body>

</html>